<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
const { log } = console;
const san = {
  name: '张三',
  child: {
    name: '小张三'
  }
}

// const zhang = san;
// zhang.name = '张五';

// 都是 {name: '张五'}，因为 san 和 zhang 两个变量，“内存地址” 指向同一个数据
// console.log('san', san);
// console.log('zhang', zhang);

// -----------------------------
// 需求“拷贝”：
  // 1. zhang 获得 san 的数据 ；  2. 改变 zhang 的数据， san 的数据不被改变

/* 实现浅拷贝的 方法一： “逻辑实现”
  // 通过 循环，实现了 逻辑 - 「浅拷贝」
    // 浅拷贝的定义：只能 拷贝对象的  “第一层” 属性。
  const zhang = {}
  for (const key in san) {
    if (Object.hasOwnProperty.call(san, key)) {
      const element = san[key];
      zhang[key] = element;
    }
  }
  zhang.name = 'xxx';
  zhang.child.name = '小小小张三'; // 
  console.log(zhang);
  console.log(san);
 */

/* 实现浅拷贝的 方法二： `...展开运算符`
  const sir = {...san};
  sir.name = '阿四';
  sir.child.name = '小小小阿四';

  console.log(sir, san);
*/


  
/* 实现深拷贝 方法一：通过 JSON.parse(JSON.stringify(san))
  // 缺陷：无法实现 对象中， 函数的拷贝

  const sir = JSON.parse(JSON.stringify(san))
  sir.name = '阿四';
  sir.child.name = '小小小阿四';
*/

/* 实现深拷贝 方法二： _.cloneDeep()  **

*/




</script>
